<template>
  <div>
   <p>工号:{{workNum}}</p>
   <el-button type="button" class="insertBtn" @click="insertClick">新增</el-button>
  <div style="align-align: center;">
  <el-table
        ref="userTab"
        stripe
        border
        :data="tableData"
        style="width: 100%;">
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="registerDate"
          label="注册日期"
          :formatter="formatDate">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账户名">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
      </el-table>
  </div>
  <!-- 新增用户组件 -->
  <insertUser></insertUser>
  
  </div>
</template>

<script>
import { mapState } from 'vuex';
import insertUser from './insertUser'

export default {
  components: {
    insertUser
  },
  props: ['workn'],
  name: 'tag2',
  data () {
    return {
      tableData: [],
      addLoading: false,
    }
  },
  computed: mapState({
    workNum :(state) => state.count,
    isShowInsert :(state) => state.isShowInsert
  }),
  methods: {
    getTableData () {
      var that = this;
      this.$http.post('/api/user/getUserInfo',{}).then( res => {
        console.log('userInfo', res);
        that.tableData = res.body
      });
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      let dt = new Date(data)
      var Y = dt.getFullYear() + '-';
      var M = (dt.getMonth()+1 < 10 ? '0'+(dt.getMonth()+1) : dt.getMonth()+1) + '-';
      var D = dt.getDate() + ' ';
      var h = (dt.getHours() < 10 ? '0'+(dt.getHours()) : dt.getHours()) + ':' ;
      var m = (dt.getMinutes() < 10 ? '0'+(dt.getMinutes()) : dt.getMinutes()) + ':' ;
      var s = (dt.getSeconds() < 10 ? '0'+(dt.getSeconds()) : dt.getSeconds());
      return Y+M+D+h+m+s;
    },
    insertClick () {
      this.$store.commit({
        type: 'syncShow',
        bool: true
      })
    }
  },
  watch : {
    isShowInsert () {
      this.getTableData();
    }
  },
  mounted() {
    this.getTableData();
  }
}
</script>

<style scoped="">
  h1, h2 {
    font-weight: normal;
  }
  .table-head{
    background-color: #909399;
  }
  .insertBtn{
    margin-bottom: 10px;
    display: inline-block;
  }
</style>
